import React,{memo,useState } from 'react'
import { Avatar, Button, Input, Popover, Image, Dropdown, Space, MenuProps } from 'antd'
import EmojiItem from './emoji'
import { DownOutlined } from '@ant-design/icons'
import type { DropdownProps } from 'antd';

function Dongtai(){
  let url = 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2';

  const { TextArea } = Input;
  const [autoSize , setAutoSize] = useState({ minRows: 1, maxRows: 1 })
  const [show, setShow] = useState(false)
  const  [text, setText] = useState('')
  const [open, setOpen] = useState(false);
  const items: MenuProps['items'] = [
    {
      label: '收藏',
      key: '收藏',
      icon:  <i className="iconfont mt-news_hot_fill_light"></i>
    },
    {
      label: '隐藏动态',
      key: '隐藏动态',
      icon: <i className="iconfont mt-juqianshou"></i>
    },
    {
      label: '举报',
      key: '举报',
      icon: <i className="iconfont mt-zhiliang"></i>
    },
  ];
  const autoFun =()=>{
    setAutoSize({ minRows: 3, maxRows: 6 })
    setShow(true)
  }

  function BlurFun(e) {
    console.log(e.target.value)
    if(e.target.value){
      return
    }
    setAutoSize({ minRows: 1, maxRows: 1 })
    setShow(false)
  }


  const  onEmojiSelect = (e)=>{
    let name = text + e.native
    setText(name);
    console.log(e)
  }
  /***
   * 显示表情栏选择器
   */
  const content = (
    <EmojiItem onEmojiSelect={(e)=>onEmojiSelect(e)}></EmojiItem>
  );

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    console.log(e)
    setOpen(false);
  };
  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
    if (info.source === 'trigger' || nextOpen) {
      setOpen(nextOpen);
    }
  };

  return <>
     <div className="dt-main">
       <div className="dt-top">
         <div className="dt-top-l">
           <div className="avatar">
             <Avatar size={50}   src={<img src={url} alt="avatar" />} />
           </div>
           <div className="dt-u-box">
             <div>用户名称</div>
             <div>12:90</div>
           </div>
         </div>
         <div className="dt-top-r">
           <Dropdown
             menu={{
               items,
               onClick: handleMenuClick,
             }}
             onOpenChange={handleOpenChange}
             open={open}
           >
             <a onClick={(e) => e.preventDefault()}>
               <Space className="gj-text">
                 <i className="iconfont mt-jiantou_xia"></i>
               </Space>
             </a>
           </Dropdown>

         </div>
       </div>
       <div className="dt-text-main">
         oasklhfahlksfhlkahflkashlfhasl
       </div>
       <div className="dt-img-main">
         <Image.PreviewGroup
           preview={{
             onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`),
           }}
         >
           <Image className="img-item"

                  width={70} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
           <Image
             width={70}
             className="img-item"
             src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
           />
           <Image
             width={70}
             className="img-item"
             src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
           />


         </Image.PreviewGroup>
       </div>

       <div className="dt-toole">
         <div className="dt-tl">点赞1次</div>
         <div className="dt-tr">
           <i className="iconfont mt-dianzan"></i>
           <i className="iconfont mt-like"></i>
           <i onClick={()=>autoFun()} className="iconfont mt-mark"></i>
         </div>
       </div>


       <div className="dt-list-item">
          <div className="Avatar">
            <Avatar size={50}   src={<img src={url} alt="avatar" />} />
          </div>
         <div className="dt-ltext">
           <div>
             <div className="dt-t1">
              <div className="dt-t1-l">留言用户</div>
             </div>
             <div className="dt-t2">asfsafasasfsafasasfsafasasfsafasasfsafasasfsafasasfsafasasfsafasasfsafas</div>
           </div>
           <div className="dt-sj">
            <div>01月09 16:11</div>
             <i onClick={()=>autoFun()} className="iconfont mt-markfill"></i>
           </div>
         </div>

       </div>
       <div className="dt-list-item dt-list-p20">
         <div className="Avatar">
           <Avatar size={50}   src={<img src={url} alt="avatar" />} />
         </div>
         <div className="dt-ltext">
           <div>
             <div className="dt-t1">
               <div className="dt-t1-l">留言用户</div>
               <div className="dt-t1-l">回复</div>
               <div className="dt-t1-l">留言用户</div>
             </div>
             <div className="dt-t2">asfsafasasfsafasasfsafasasfsafasasfsafasasfsafasasfsafasasfsafasasfsafas</div>
           </div>
           <div className="dt-sj">
             <div>01月09 16:11</div>
             <i onClick={()=>autoFun()} className="iconfont mt-markfill"></i>
           </div>
         </div>

       </div>

       <div className="dt-box-text">
         <TextArea onFocus={()=>autoFun()} onBlur={(e)=>BlurFun(e)}  autoSize={autoSize}  placeholder="评论" />
       </div>
       {
         show ? <div className="dt-fb">
           <div className="dt-fb-l">
             <Popover placement="bottom" content={content} trigger="click">
               <i className="iconfont mt-xiaolian icon"></i>
             </Popover>
           </div>
           <div className="dt-fb-r">
             <Button type="primary" className="from-but" size="small" >发表</Button>
           </div>
         </div>:""
       }
     </div>
   </>
}

export default memo(Dongtai)
